<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>业务受理</title>
		<!-- 导入jquery核心类库 -->
		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
		<!-- 导入easyui类库 -->
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../js/easyui/ext/portal.css">
		<link rel="stylesheet" type="text/css" href="../../css/default.css">
		<link rel="stylesheet" type="text/css" href="../../css/city-picker.css" />
		<link rel="stylesheet" type="text/css" href="../../css/styleorder.css">
		<script type="text/javascript" src="../../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../../js/easyui/ext/jquery.portal.js"></script>
		<script type="text/javascript" src="../../js/easyui/ext/jquery.cookie.js"></script>
		<script src="../../js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
		<script type="text/javascript" src="../../js/city-picker/city-picker.data.js"></script>
		<script type="text/javascript" src="../../js/city-picker/city-picker.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GzYjrkaTLoCd9xiMIbEkrb9HDCyuUmnN"></script>
		<script type="text/javascript">
			var sendAddress = new BMap.Autocomplete( //建立一个自动完成的对象
				{
					"input": "sendAddress"
				});

			var myValue;
			sendAddress.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

				//第一个框
				var address1 = encodeURIComponent(myValue);
				$.getJSON("http://api.map.baidu.com/cloudgc/v1?ak=GzYjrkaTLoCd9xiMIbEkrb9HDCyuUmnN&address=" + address1 + "&callback=?", function(data) {
					if(data.status == 0 && data.result.length > 0) {
						$("#sendAreaInfo").citypicker('reset');
						$("#sendAreaInfo").citypicker('destroy');
						$("#sendAreaInfo").citypicker({
							province: data.result[0].address_components.province,
							city: data.result[0].address_components.city,
							district: data.result[0].address_components.district
						});
					}
				});
			});

			//第二个
			var recAddress = new BMap.Autocomplete( //建立一个自动完成的对象
				{
					"input": "recAddress"
				});

			var myValue2;
			recAddress.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue2 = _value.province + _value.city + _value.district + _value.street + _value.business;

				var address2 = encodeURIComponent(myValue2);
				$.getJSON("http://api.map.baidu.com/cloudgc/v1?ak=GzYjrkaTLoCd9xiMIbEkrb9HDCyuUmnN&address=" + address2 + "&callback=?", function(data) {
					if(data.status == 0 && data.result.length > 0) {
						$("#recAreaInfo").citypicker('reset');
						$("#recAreaInfo").citypicker('destroy');
						$("#recAreaInfo").citypicker({
							province: data.result[0].address_components.province,
							city: data.result[0].address_components.city,
							district: data.result[0].address_components.district
						});
					}
				});
			});

			$(function() {
				$("body").css({
					visibility: "visible"
				});

				// 对save按钮条件 点击事件
				$('#save').click(function() {
					// 对form 进行校验
					if($('#orderForm').form('validate')) {
						$('#orderForm').submit();
					}
				});
			});
		</script>
	</head>

	<body class="easyui-layout" style="visibility:hidden;">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false">
			<div class="datagrid-toolbar">
				<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">新单</a>
				<a id="edit" icon="icon-edit" href="../../pages/take_delivery/work_order.html" class="easyui-linkbutton" plain="true">工单操作</a>
			</div>
		</div>
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form id="orderForm" action="" method="post">
				<table class="table-edit" width="95%" align="center">
					<tr class="title">
						<td colspan="4">客户信息</td>
					</tr>
					<tr>
						<td style="width: 300px;">来电号码:</td>
						<td>
							<input type="text" class="easyui-validatebox" name="telephone" required="true" />
						</td>
						<td>客户编号:</td>
						<td>
							<input type="text" class="easyui-validatebox" name="customerId" required="true" />
						</td>
					</tr>
					<tr>
						<td>客户姓名:</td>
						<td colspan="3">
							<input type="text" class="easyui-validatebox" name="customerName" required="true" />
						</td>
					</tr>
					<tr class="title">
						<td colspan="4">寄件人信息</td>
					</tr>
					<tr>
						<td>姓名:</td>
						<td>
							<input type="text" class="easyui-validatebox" name="sendName" required="true" />
						</td>
						<td>联系方式:</td>
						<td>
							<input type="text" class="easyui-validatebox" name="sendMobile" required="true" />
						</td>
					</tr>
					<tr>
						<td>寄件公司:</td>
						<td>
							<input type="text" class="easyui-validatebox" name="sendCompany" required="true" />
						</td>
						<td>省市区:</td>
						<td>
							<div style="position:relative;">
								<input id="sendAreaInfo" type="text" class="easyui-validatebox" name="sendAreaInfo" required="true" data-toggle="city-picker" />
							</div>
						</td>
					</tr>
					<tr>
						<td>详细地址:</td>
						<td colspan="3">
							<input id="sendAddress" name="sendAddress" type="text" class="form-control" placeholder="街道详细（精确到门牌号） " size="60" required="required">
							<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
						</td>
					</tr>
					<tr class="title">
						<td colspan="4">收件人信息</td>
					</tr>
					<tr>
						<td>姓名:</td>
						<td>
							<input type="text" class="easyui-validatebox" name="recName" required="true" />
						</td>
						<td>联系方式:</td>
						<td>
							<input type="text" class="easyui-validatebox" name="recMobile" required="true" />
						</td>
					</tr>
					<tr>
						<td>寄件公司:</td>
						<td>
							<input type="text" class="easyui-validatebox" name="recCompany" required="true" />
						</td>
						<td>省市区:</td>
						<td>
							<div style="position:relative;">
								<input id="recAreaInfo" type="text" class="easyui-validatebox" name="recArea" required="true" data-toggle="city-picker" />
							</div>
						</td>
					</tr>
					<tr>
						<td>详细地址:</td>
						<td colspan="3">
							<input id="recAddress" name="recAddress" type="text" class="form-control" placeholder="街道详细（精确到门牌号） " size="60" required="required">
							<!--<input id="recAddress" type="text" class="easyui-numberbox" name="recAddress" required="true" size="60" />-->
							<div id="searchResultPanel2" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
						</td>
					</tr>
					<tr class="title">
						<td colspan="4">货物信息</td>
					</tr>
					<tr>
						<td>托寄物:</td>
						<td>
							<select class="easyui-combobox" name="goodsType" required="true">
								<option value="文件">文件</option>
								<option value="衣服">衣服</option>
								<option value="食品">食品</option>
								<option value="电子产品">电子产品</option>
							</select>
						</td>
						<td>重量:</td>
						<td>
							<input type="text" class="easyui-numberbox" name="weight" required="true" />
						</td>
					</tr>
					<tr>
						<td>快递产品:</td>
						<td>
							<select class="easyui-combobox" name="sendProNum" required="true">
								<option value="速运当日">速运当日</option>
								<option value="速运次日">速运次日</option>
								<option value="速运隔日">速运隔日</option>
							</select>
						</td>
						<td>付款方式：</td>
						<td>
							<select class="easyui-combobox" name="payTypeNum" required="true">
								<option value="寄付日结">寄付日结</option>
								<option value="寄付月结">寄付月结</option>
								<option value="到付">到付</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>备注:</td>
						<td colspan="3">
							<input type="text" class="easyui-numberbox" name="remark" required="true" size="60" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>

</html>